<template>
    <div class="manage-pubilc-container" :ref="refName">
        <template v-if="ready">
            <slot></slot>
        </template>
    </div>
</template>
<script>
import { debounce } from "../../utils/container.js";
export default {
    name:"managePubilcContainer",
    props:{
        // 接收父级给的宽/高
        options:Object
    },
    data(){
        return{
            refName:"imoocContainer",
            ready:false,
            dom:"",
            observer:"",
            // 设置的宽高比
            width:0,
            height:0,
            // 视口的宽高
            orginalWidth:0,
            orginalHeight:0
        }
    },
    methods:{
        // 初始化
        initSize(){
            return new Promise((resolve,reject)=>{
                this.$nextTick(()=>{
                    console.log("initSize")
                    this.dom = this.$refs[this.refName];
                    // 获取父级给的宽高比
                    if(this.options && this.options.width && this.options.height){
                        // 判断父级是否传入宽高比，存在就记录
                        this.width = this.options.width;
                        this.height = this.options.height;
                    }else{
                        // 不存在就获取撑开的宽高
                        this.width = this.dom.clientWidth;
                        this.height = this.dom.clientHeight;
                    };
                    // 获取视口宽高
                    if(!this.orginalWidth || !this.orginalHeight){
                        // 获取视口的宽高
                        this.orginalWidth = window.screen.width;
                        this.orginalHeight = window.screen.height;
                    };
                    resolve();
                });
            });
        },

        initMutationObserver(){
            // DOM发生变化时被调用
            const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
            // 监听到变化就执行this.onResize
            this.observer = new MutationObserver(this.onResize);
            this.observer.observe(this.dom, {
                // 监听属性
                attributes:true,
                // 监听属性为style
                attributeFilter:['style'],
                // 监听属性老的值
                attributeOldValue:true

            });
        },

        removeMutationObserver(){
            if(this.observer){
                // 断开连接
                this.observer.disconnect();
                // 删除队列中所有待处理的通知
                this.observer.takeRecords();
                this.observer = null;
            }
        },

        updataSize(){
            // dom的宽高设置为设定的宽高
            if(this.width && this.height){
                this.dom.style.width = `${this.width}px`;
                this.dom.style.height = `${this.height}px`;
            }else{
                this.dom.style.width = `${this.orginalWidth}px`;
                this.dom.style.height = `${this.orginalHeight}px`;
            };
        },

        updatedScale(){
          // 获取真实视口尺寸
          const currentWidth = document.body.clientWidth;
          const currentHeight = document.body.clientHeight;
          // 获取大屏的宽高
          const realWidth = this.width || this.orginalWidth;
          const realHeight = this.height || this.orginalHeight;
          // console.log("updatedScale",currentWidth,currentHeight);
          const widthScale = currentWidth / realWidth;
          const heightScale = currentHeight / realHeight;
          // 设置缩放的宽高比
        //   console.log(this.dom)
          this.dom.style.transform = `scale(${widthScale},${heightScale})` 
        },

        async onResize(e) {
            await this.initSize();
            this.updatedScale();
        },

    },
    async mounted() {
        this.ready = false;
        await this.initSize();
        this.updataSize();
        this.updatedScale();
        window.addEventListener('resize',debounce(1000,this.onResize));
        console.log(this.width,this.height,this.orginalWidth,this.orginalHeight);
        // DOM发生变化时被调用
        this.initMutationObserver();
        this.ready = true;
    },
    // 查询vue的方法
    // console.log(require("vue"))
    unmounted() {
        window.removeEventListener('resize',debounce(1000,this.onResize));
        // DOM发生变化时被调用
        removeMutationObserver();
    },
}
</script>
<style lang="scss">
    .manage-pubilc-container{
        position: fixed;
        top:0;
        left: 0;
        overflow: hidden;
        transform-origin:left top ;
        z-index: 999;
    }
</style>